<template>
	<div class="page">
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>产品列表</h2>
			<div class="back">&nbsp;</div>
		</div>
		<div class="abox">
			<ul class="product1">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <li class="flex" v-for="(v,i) in productList" :key="v.productId" @click="enter('/goodsdetail?productId='+v.productId)">
              <div class="productImage">
                <img :src="v.frontPicUrl">
              </div>
              <div class="productInfo flex col jlr">
                <div class="title">
                  {{v.productName}}
                </div>
                <div class="viewprice flex" style="align-items: flex-end;">
                  <h2>￥<span>{{v.price}}</span></h2><del>￥{{v.originalPrice}}</del>
                </div>
                <div class="buybox">{{v.sales}}人已购</div>
              </div>
            </li>
          </van-list>
        </van-pull-refresh>
			</ul>

		</div>
	</div>
</template>
<script>
import saveScroll from '../../mixins/scroll'	
export default {
	mixins:[saveScroll],
	data(){
		return {
			timer:null,
			productList:[],
      pageNum: 0,
      pageSize: 10,
      finished:false,
      loading:false,
      isLoading:false
		}
	},
	activated() {
		var that = this
		that.timer = setTimeout(()=>{//不是第一次进来这个定时器会被关闭
			if(!this.$store.state.backstate){//不是返回
				 console.log('执行了，返回顶部')
				 that.productList = [];
				 that.pageNum = 0;
				 that.onLoad();
				 that.isLoading = false;
			}else{
				 console.log('不返回顶部')
				 that.$store.commit('setBackstate',false)
			}
		})       
	},
	methods:{
		enter(v){
			this.$router.push(v)
		},
		back(){
      this.$router.replace("/");
			//this.$router.go(-1)
		},
    onRefresh(){
      let that = this;
      setTimeout(() => {
        that.pageNum = 0;
        that.productList = [];
        that.getList();
        that.isLoading = false;
        that.finished = false;
      }, 500);

      console.log('finished',this.finished);
    },
    onLoad(){
      const that = this;
			clearTimeout(that.timer)
      that.getList();
      that.isLoading = false;
    },
    getList(){
      let that = this;
      console.log('list size :',that.productList.length);
      that.pageNum = that.pageNum + 1;

      const reqData = {
        keyWord: this.$route.query.key,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };

      this.$ajax.searchProduct(reqData).then(res=>{
        if(res != null){
          const code = res.code;
          const msg = res.msg;
          if(code == 0){
            const data = res.data;
            if(data){
              const proList = data.proList;
              if(proList != null && proList.length != 0){
                proList.forEach(function(item, index, array) {
                  that.productList.push(item);
                });
                if(proList.length < that.pageSize){
                  that.finished = true;
                }
              }else{
                that.finished = true;
              }
            }
          }
        }
      });

      that.isLoading = false;
      that.loading = false;
    }
	}
}
</script>
